<!-- 登录中心组件 -->
<template>
  <div class="login-box">
    <van-form validate-first @submit="onSubmit" :model="form" label-align="right">
      <van-field v-model="form.phone" name="phone" label="手机号" :rules="phoneRules" />
      <van-field
        v-model.number="form.code"
        center
        clearable
        label="短信验证码"
        :rules="codeRules"
        placeholder="请输入短信验证码"
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          :disabled="disabling"
          @click="verification"
        >
          {{codetexts}}
          <span v-show="showS">s</span>
        </van-button>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    //验证规则
    this.phoneRules = [
      { required: true, message: "请输入手机号" },
      { validator: this.phoneValidator, message: "手机号格式错误" }
    ];
    this.codeRules = [{ required: true, message: "请输入验证码" }];
    return {
      disabling: false,
      disabled: false,
      showS: 0, // s 时候显示
      codetexts: "发送短信",
      logintext: "验证码登录",
      userStatus: "",

      form: {
        // password: "",
        code: "",
        jwt: "",
        phone: "",
        smscode: "",
        userid: ""
      }
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    phoneValidator(val) {
      return /1\d{10}/.test(val);
    },
    verification() {
      // console.log("点击获取验证码");
      let phone = this.form.phone;
      // console.log(phone);
      try {
        this.$http({
          method: "post",
          url: "index/common/sendMsg",
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            phone,
            code: `SMS_143540007`
          }
        });
      } catch (error) {
        console.log("个人注册的短信验证出现问题...");
      }
      this.codetexts = 60;
      this.showS = true;
      this.disabling = true;
      let timer = setInterval(() => {
        this.codetexts = this.codetexts - 1;
        if (this.codetexts == 0) {
          clearInterval(timer);
          this.codetexts = "重新发送";
          this.showS = false;
          this.disabling = false;
        }
      }, 1000);
    },
    // 登录按钮
    onSubmit() {
      this.$http({
        method: "post",
        url: "index/login/login",
        data: {
          code: "phone",
          phone: this.form.phone,
          smscode: this.form.code,
          jwt: ""
        }
      })
        .then(res => {
          const _data = res.data;
          console.log(res, "登录获取的数值");
          if (_data.State.Code == 200) {
            this.jwt = _data.jwt.access_token;
            this.phone = _data.phone;
            this.$store.commit("phone", this.phone);
            this.userid = _data.user_id;
            window.localStorage.setItem("user_id", _data.user_id);
            // this.$store.commit("userId", this.userid);
            // console.log(this.$store.state.user_id, "13131313131?");
            console.log(this.jwt);
            this.$http({
              method: "post",
              url: "index/login/login",
              data: {
                code: "phone",
                phone: this.form.phone,
                smscode: this.form.code,
                jwt: this.jwt
              }
            })
              .then(res => {
                console.log(res.data, "二次验证");
                this.userStatus = res.data.data.userStatus; //是否为企业用户
                this.$store.commit("userStatus", this.userStatus);
                // console.log(this.$store.state.phone, "是否为企业用户false");
                if (res.data.State.Code == 200) {
                  this.$store.commit("set_token", this.jwt);
                  window.localStorage.setItem("token", this.jwt);
                  window.localStorage.setItem("phone", this.form.phone);
                  console.log(this.$store.state, "dadadadadaaafassasdada");
                  this.$Notify({ type: "success", message: "登录成功" });
                  const url = this.$route.query.redirect || "/";
                  this.$router.push(url);
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            this.$Notify({ type: "danger", message:_data.State.message});
            //  this.$router.push('/register');
          }
        })

        .catch(err => {
          console.log(err, "错误");
          this.$Notify({ type: "danger", message: "登录失败" });
        });
    },

    changes(ev, index) {
      console.log(index);
      this.active = index;
      this.account = !index;
    },
    getinfophone() {
      const infoPhone = localStorage.getItem("phone");
      if (true) {
        this.form.phone = JSON.parse(infoPhone);
      }
    }
  },
  mounted() {
    this.getinfophone();
  }
};
</script>
<style lang='scss' scoped>
.login-nav {
  background-color: rgb(25, 137, 250);
}
.login-box {
  margin-top: 5rem;
}
</style>